﻿<UserControl 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:vm="clr-namespace:LightSwitchApplication.UserControls.ReportChart"
  x:Class="LightSwitchApplication.UserControls.ReportChart.LSWReportChart"
  HorizontalAlignment="Center" VerticalAlignment="Center">
    <UserControl.DataContext>
        <vm:SalesViewModel />
    </UserControl.DataContext>
    <UserControl.Resources>

        <LinearGradientBrush x:Key="HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC5C1BA" Offset="0" />
            <GradientStop Color="#FF6C6556" Offset="1" />
            <GradientStop Color="#FF6A6457" Offset="0.5" />
            <GradientStop Color="#FF504B40" Offset="0.5" />
        </LinearGradientBrush>

        <Style x:Key="CustomTitleStyle" TargetType="telerik:ChartTitle">
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="OuterBorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="16" />
        </Style>

        <Style x:Key="CustomLegendStyle" TargetType="telerik:ChartLegend">
            <Setter Property="HeaderFontWeight" Value="Normal" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Margin" Value="0,20,0,0" />
        </Style>

        <Style x:Key="CustomAxisTitleStyle" TargetType="telerik:AxisTitle">
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="Margin" Value="0,0,10,0" />
        </Style>

    </UserControl.Resources>

    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--Header-->

        <Border BorderBrush="#FF6B6455" BorderThickness="1" CornerRadius="5,5,0,0"
            Background="{StaticResource HeaderBackground}">
            <Border BorderBrush="#7FE2DFD9" BorderThickness="1" CornerRadius="4,4,0,0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
                        <Image Source="/DucThinh.Client;component/UserControls/Images/Logo_chart.png" Margin="20,5,10,0" Width="29"
                   Height="41" />
                        <ContentControl Content="Sales Report" FontSize="20"
                            VerticalAlignment="Bottom" Margin="0,0,0,6" Foreground="#FFEDEDED" />
                    </StackPanel>
                    <StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0,0,20,0"
                      VerticalAlignment="Bottom">
                        <Image Source="/DucThinh.Client;component/UserControls/Images/icon_overview.png" Margin="0,0,8,0" Width="27"
                   Height="32" />
                        <ContentControl Content="Overview" FontSize="15" VerticalAlignment="Bottom"
                            Margin="0,0,0,8" Foreground="#FFFFFFFF" />
                    </StackPanel>
                    <StackPanel Grid.Column="2" Orientation="Horizontal" Margin="0,0,20,0"
                      VerticalAlignment="Bottom">
                        <Image Source="/DucThinh.Client;component/UserControls/Images/Icon_Annual_Sales.png" Margin="0,0,8,0" Width="21"
                   Height="32" />
                        <ContentControl Content="Annual Sales" FontSize="15"
                            VerticalAlignment="Bottom" Margin="0,0,0,8" Foreground="#FFD2D2D2" />
                    </StackPanel>
                    <StackPanel Grid.Column="3" Orientation="Horizontal" Margin="0,0,20,0"
                      VerticalAlignment="Bottom">
                        <Image Source="/DucThinh.Client;component/UserControls/Images/Icon_Monthly_Sales.png" Margin="0,0,8,0" Width="20"
                   Height="32" />
                        <ContentControl Content="Monthly Sales" FontSize="15"
                            VerticalAlignment="Bottom" Margin="0,0,0,8" Foreground="#FFD2D2D2" />
                    </StackPanel>
                </Grid>
            </Border>
        </Border>

        <!--Content-->
        <Border Grid.Row="1" BorderBrush="#FF828282" BorderThickness="1,0,1,1"
            CornerRadius="0,0,5,5" Background="#FFF5F5F5">
            <Border BorderBrush="White" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">
                <Grid>
                    <telerik:RadChart x:Name="RadChart1" UseDefaultLayout="False"
                            ItemsSource="{Binding Data}"
                            BorderThickness="0">
                        <telerik:RadChart.SeriesMappings>
                            <telerik:SeriesMapping LegendLabel="Annual Sales" ChartAreaName="ChartArea1" CollectionIndex="0">
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:SplineAreaSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True" ItemToolTipFormat="Year: #XCAT&#13;Sales: #Y{C0}">
                                        <telerik:SplineAreaSeriesDefinition.Appearance>
                                            <telerik:SeriesAppearanceSettings Stroke="#ff62a7b9" StrokeThickness="4" />
                                        </telerik:SplineAreaSeriesDefinition.Appearance>
                                        <telerik:SplineAreaSeriesDefinition.InteractivitySettings>
                                            <telerik:InteractivitySettings HoverScope="Series" SelectionScope="Series" />
                                        </telerik:SplineAreaSeriesDefinition.InteractivitySettings>
                                    </telerik:SplineAreaSeriesDefinition>
                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:ItemMapping FieldName="Volume" DataPointMember="YValue" />
                                <telerik:ItemMapping FieldName="Category" DataPointMember="XCategory" />
                            </telerik:SeriesMapping>
                            <telerik:SeriesMapping ChartAreaName="ChartArea2" CollectionIndex="1">
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:BarSeriesDefinition ShowItemToolTips="True">
                                        <telerik:BarSeriesDefinition.InteractivitySettings>
                                            <telerik:InteractivitySettings HoverScope="Item" SelectionScope="Item" />
                                        </telerik:BarSeriesDefinition.InteractivitySettings>
                                    </telerik:BarSeriesDefinition>
                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:ItemMapping FieldName="Volume" DataPointMember="YValue" />
                                <telerik:ItemMapping FieldName="Category" DataPointMember="XCategory" />
                            </telerik:SeriesMapping>
                            <telerik:SeriesMapping LegendLabel="Doughnut Series" ChartAreaName="ChartArea3" CollectionIndex="2">
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:DoughnutSeriesDefinition LabelOffset="0.7" ItemLabelFormat="#%{p0}">
                                        <telerik:DoughnutSeriesDefinition.InteractivitySettings>
                                            <telerik:InteractivitySettings HoverScope="Item" SelectionScope="Item" SelectionMode="Single" />
                                        </telerik:DoughnutSeriesDefinition.InteractivitySettings>
                                    </telerik:DoughnutSeriesDefinition>
                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:ItemMapping FieldName="Volume" DataPointMember="YValue" />
                                <telerik:ItemMapping FieldName="Category" DataPointMember="LegendLabel" />
                            </telerik:SeriesMapping>
                        </telerik:RadChart.SeriesMappings>

                        <Grid Margin="0,0,10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="5*" />
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="1.2*" />
                            </Grid.ColumnDefinitions>

                            <telerik:ChartTitle x:Name="chartTitle1" Content="Annual Sales" Grid.ColumnSpan="3"
                                  Style="{StaticResource CustomTitleStyle}" />

                            <telerik:ChartArea x:Name="ChartArea1"
                                   LegendName="ChartLegend1"
                                   EnableAnimations="{Binding ChartAnimationsEnabled}"
                                   Grid.Row="1" Grid.ColumnSpan="3"
                                   Padding="5,10,20,5"
                                   BorderThickness="0">
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX LayoutMode="Normal" />
                                </telerik:ChartArea.AxisX>
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY Title="Hai mười triệu đồng" ExtendDirection="None">
                                        <telerik:AxisY.AxisStyles>
                                            <telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" />
                                        </telerik:AxisY.AxisStyles>
                                    </telerik:AxisY>
                                </telerik:ChartArea.AxisY>
                            </telerik:ChartArea>

                            <telerik:ChartTitle x:Name="chartTitle2" Content="Thông tin bán hàng mỗi tháng năm 2010"
                                  Grid.Row="2" Style="{StaticResource CustomTitleStyle}" />

                            <telerik:ChartArea x:Name="ChartArea2" EnableAnimations="{Binding ChartAnimationsEnabled}"
                                 ItemToolTipOpening="ChartArea2_ItemToolTipOpening"
                                 ItemClick="ChartArea2_ChartItemClick" Grid.Row="3">
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY Title="Hai mười triều đồng" ExtendDirection="Up">
                                        <telerik:AxisY.AxisStyles>
                                            <telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" />
                                        </telerik:AxisY.AxisStyles>
                                    </telerik:AxisY>
                                </telerik:ChartArea.AxisY>
                            </telerik:ChartArea>

                            <telerik:ChartTitle x:Name="chartTitle3" Content="Sản phẩm bán trong tháng"
                                  Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"
                                  Style="{StaticResource CustomTitleStyle}" />

                            <telerik:ChartArea x:Name="ChartArea3" LegendName="ChartLegend2" SmartLabelsEnabled="False"
                                 Grid.Row="3" Grid.Column="1" />

                            <telerik:ChartLegend x:Name="ChartLegend2" Grid.Row="2" Grid.RowSpan="2" Header=" "
                                   Grid.Column="2" Style="{StaticResource CustomLegendStyle}" />
                        </Grid>
                    </telerik:RadChart>
                </Grid>
            </Border>
        </Border>
    </Grid>
</UserControl>
